<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <slot></slot>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import http from '@/util/http'
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['changeSchedulesList', 'clearSchedulesList', 'clearDataIndex'])
  },
  mounted () {
    const that = this
    new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 10,
      centeredSlides: true,
      slideToClickedSlide: true,
      on: {
        slideChangeTransitionEnd: function () {
        //   alert(this.activeIndex)// 切换结束时，告诉我现在是第几个slide
          that.$router.push(`/cinema/${that.$route.params.cinemaId}/film/${that.$store.state.filmList[this.activeIndex].filmId}`).then(res => {
            http({
              url: `/gateway/?filmId=${that.$route.params.filmId}&cinemaId=${that.$route.params.cinemaId}&date=${that.$store.state.filmList[this.activeIndex].showDate[0]}&k=5817098`,
              headers: {
                'X-Host': 'mall.film-ticket.schedule.list'
              }
            }).then((res) => {
              that.clearSchedulesList()
              that.changeSchedulesList(res.data.data.schedules)
              that.clearDataIndex()
            })
          })
        }
      }
    })
  }
}
</script>
